class ChatField {
    // 构造函数，用于创建并初始化ChatField对象
    constructor(playground) {
        // 保存传入的playground对象，它包含了游戏的主要元素和设置
        this.playground = playground;

        // 创建一个div元素，用于显示聊天历史记录，并设置其初始内容为"历史记录"
        this.$history = $(`<div class="ac-game-chat-field-history">历史记录</div>`);
        // 创建一个input元素，供玩家输入聊天信息
        this.$input = $(`<input type="text" class="ac-game-chat-field-input">`);

        // 初始状态下，隐藏聊天历史记录和输入框
        this.$history.hide();
        this.$input.hide();

        // 定义一个变量，用于存储setTimeout函数的ID，以便在需要时清除定时器
        this.func_id = null;

        // 将聊天历史记录和输入框添加到playground的DOM元素中
        this.playground.$playground.append(this.$history);
        this.playground.$playground.append(this.$input);

        // 调用start方法，开始初始化事件监听等设置
        this.start();
    }

    // 开始方法，用于初始化事件监听
    start() {
        // 调用add_listening_events方法，为输入框添加键盘事件监听
        this.add_listening_events();
    }

    // 添加事件监听方法
    add_listening_events() {
        let outer = this; // 使用外部变量outer引用当前的ChatField实例

        // 为输入框添加keydown事件监听器
        this.$input.keydown(function (e) {
            // 当用户按下Esc键时（键码为27），隐藏输入框
            if (e.which === 27) {
                outer.hide_input();
                return false; // 阻止事件的进一步传播
            }
            // 当用户按下Enter键时（键码为13），处理聊天信息
            else if (e.which === 13) {
                // 获取当前设置的用户名和输入框中的文本
                let username = outer.playground.root.settings.username;
                let text = outer.$input.val();

                // 如果输入框中有文本，则添加消息到历史记录，并通过mps发送消息
                if (text) {
                    outer.$input.val(""); // 清空输入框
                    outer.add_message(username, text); // 在历史记录中显示消息
                    outer.playground.mps.send_message(username, text); // 发送消息
                }
                return false; // 阻止表单提交等默认行为
            }
        });
    }

    // 渲染消息的方法，接收消息文本作为参数，并返回一个包含该文本的div元素
    render_message(message) {
        return $(`<div>${message}</div>`);
    }

    // 添加消息到历史记录的方法
    add_message(username, text) {
        // 显示历史记录区域
        this.show_history();
        // 创建消息内容，并添加到历史记录区域中
        let message = `[${username}]${text}`;
        this.$history.append(this.render_message(message));
        // 将历史记录区域的滚动条滚动到底部
        this.$history.scrollTop(this.$history[0].scrollHeight);
    }

    // 显示历史记录方法，并在3秒后自动隐藏
    show_history() {
        let outer = this;
        this.$history.fadeIn(); // 淡入显示历史记录

        // 如果之前已设置定时器，则清除它
        if (this.func_id) clearTimeout(this.func_id);

        // 设置一个新的定时器，3秒后淡出隐藏历史记录，并清除定时器ID
        this.func_id = setTimeout(function () {
            outer.$history.fadeOut();
            outer.func_id = null;
        }, 3000);
    }

    // 显示输入框方法
    show_input() {
        this.show_history(); // 显示历史记录（如果有需要）
        // 显示输入框，并使其获得焦点
        this.$input.show();
        this.$input.focus();
    }

    // 隐藏输入框方法
    hide_input() {
        // 隐藏输入框，并使游戏地图的画布元素获得焦点
        this.$input.hide();
        this.playground.game_map.$canvas.focus();
    }
}
